<!doctype html>
<html>
<head>
#parse("vm/common/header.html")

<script>

var type_chart = "bar"; // "column";


$(document).ready(function () {
    $("#ketqua_container").hide();
    //---------init--------------
    //lay danh sach hoc ky

    //---------------------------

});

function report() {
    //hide
    $("#ketqua_container").hide();

    //lay du lieu tu server
    getData();
}

function getData() {
    //call server to get data
    jQuery.ajax({
        type: "POST",
        url: "tuyensinhgioitinhdata.action?namHoc=" + jQuery("#namHoc").val() ,
        data: {} ,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //dung cai nay thi response phai dung json format, neu khong thi error parseerror
        success: function (response) {
	        var data = response;
	        //process data 
			
	        if(data!=null && data.length>0){
	        	//view data
	        	viewData(data[0]);
	        }else{
	        	alert("NODATA");
	        }
    	},error: function (xhr, status, error) {
    		alert('ERROR');
            var err = eval("(" + xhr.responseText + ")");
            console.log(err.Message);
        }
    });
}

function viewData(data) {
    var datainfo = createTable(data);
	
  	//---show------
    $("#ketqua_container").show();
  	
  	
    //---draw-chart---
    drawChart(datainfo);
}

function createTable(data) {
	var categories = [];
	var datas = [];
	//----------------------
    //create tbl
    var tblid = "table_container";
    
    var html = '<table id="' + tblid + '" class="table">';
    html+= ' <thead>';
    html+= '    <tr>';
    html+= '      <th></th>';
    html+= '      <th>Số SV</th>';
    html+= '       <th>Phần trăm</th>';
    html+= '    </tr>';
    html+= '  </thead>';
    html+= '  <tbody>';
    
    var tongso = parseInt(data.tongSo);
    var nam = parseInt(data.soSVNam);
    var nu = parseInt(data.soSVNu);
    //{"tongSo":"1000","soSVNu":"200","soSVNam":"8000"}
    html+= '    <tr>';
    html+= '      <td>' + 'Tổng SV' + '</td>';
    html+= '      <td>' + data.tongSo + '</td>';
    html+= '      <td>' +  '' + '</td>';
    html+= '    </tr>';
 
    
    html+= '    <tr>';
    html+= '      <td>' + 'Nam' + '</td>';
    html+= '      <td>' + data.soSVNam + '</td>';
    html+= '      <td>' +  nam*100/(tongso==0?1:tongso) + '%</td>';
    html+= '    </tr>';
    
    html+= '    <tr>';
    html+= '      <td>' + 'Nữ' + '</td>';
    html+= '      <td>' + data.soSVNu + '</td>';
    html+= '      <td>' +  nu*100/(tongso==0?1:tongso) + '</td>';
    html+= '    </tr>';
    
    html+= '  </tbody>';
    html+= '</table>';

    $("#data_container").html(html);
    
    //markup table
    //markup_table();
    
    return {tong : parseFloat(data.tongSo) ,
    		nam : parseFloat(data.soSVNam) ,
    		nu : parseFloat(data.soSVNu) 
    	};
}
function drawChart(datainfo) {
	var series_data = [{
	    name: 'Nam', 
		y : datainfo.nam,
		color : 'red'
	},{
	    name: 'Nữ', 
		y : datainfo.nu,
		color: 'blue '
	}
	];

	
    $('#chart_container').highcharts({
    	chart: {
        },
        title: {
            text: '$pagename'
        },
        subtitle: {
            text: "Tỷ lệ giới tính " +  " - Năm học : " + jQuery("#namHoc :selected").text()
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat:  '{series.name}: <b>{point.y: ,.0f}</b>'//'{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Giới tính',
            data: series_data
        }]
    });
}

function export_excel() {
	var filename = "bc-gioitinh"+ jQuery("#namHoc").val() 
		+ ".xls"; 
    tableToExcel('table_container', 'baocao', filename);
}

function markup_table(){
	$('#table_container').bind('dynatable:preinit', function (e, dynatable) {
        dynatable.utility.textTransform.myNewStyle = function (text) {
            return text
             .replace(/\s+/, '_')
             .replace(/[A-Z]/, function ($1) { return $1 + $1 });
        };
    }).dynatable({
        table: {
            defaultColumnIdStyle: 'myNewStyle'
        },
        features: {
            paginate: false,
            search: false,
            recordCount: false,
            perPageSelect: false
        }
    });
}

</script>


</head>
<body>
<!-- tab menu -->
#parse("vm/common/top.html") 

<!-- title page -->
#parse("vm/common/title.html")
<!-- Content ---->
<div class="content_wapper padding">
<div class="container">
<div class="row">

<!-- left menu -->
#parse("vm/common/left-menu.html")

<!-- right content -->
#parse("vm/common/small-title.html")

<div class="sinhvien_wapper" style="">   
    <!--table-->
    <div>
    <!--filter-->
    <div class="row padding_notop" style="border-bottom: 1px solid #FFFFFF;">
    <div class="hocky-filter col-md-3" >
        <label>Năm học</label>
    	<select id="namHoc" class="form-control" name="namHoc">
          <option value="2014">2014-2015</option>
          
          <option value="2013">2013-2014</option>
          
          <option value="2012">2012-2013</option>
          
          <option value="2011">2011-2012</option>
        </select>
    </div>
    <div class="col-md-1"></div>
    
    <div class="col-md-3" style="margin-left: 20px;padding-top: 25px;">
        <div class="button" style="width: 120px;" onclick="report()" >Báo cáo</div>
    </div>
    </div>

    <!-------------ketqua-------------->
    <div id="ketqua_container" style="margin-top:10px">

    <!--dulieu-->
    <div >
        <label>Dữ liệu</label>
        <div style="float:right">
            <ul>
                <li>
                    <a style="border-width: 1px;border-color: black;border-style: solid;padding: 2px;" 
                        onclick="export_excel()" href="#">EXCEL</a>
                    <a id="dlink"  style="display:none;"></a>
                </li>
            </ul>
        </div>
    </div>
    
    <div id="data_container">
    </div>
    
    <!--chart-->
    <div>
    <div>
        <label>Biểu đồ</label>
    </div>
    <div id="chart_container"></div>
    </div>

    </div>
</div>

</div>


</div>
</div>
</div>
<!-- end Content ---->

<!-- Footer ---->
#parse("vm/common/footer.html")
</body>
</html>